<template>
  <view class="">
    <view class="flex">
      <view class="" style="margin-right: 20rpx;">模板名称</view>
      <input type="text" placeholder="请填写计费名称">
    </view>
    <view class="gradient" />
    <view class="flex justify-between">
      <view class="">运营产品</view>
      <uni-data-checkbox v-model="radio" :localdata="car" @change="carChange"></uni-data-checkbox>
    </view>
    <view class="gradient" />
    <view class="flex justify-between">
      <view class="">计费信息</view>
      <radio-group name="radio">
        <label>
          <radio value="r1" checked="true" /><text>不展示</text>
        </label>
        <label>
          <radio value="r2" /><text>展示</text>
        </label>
      </radio-group>

      <!-- <uni-data-checkbox v-model="billingRadio" :localdata="billingInfoList"></uni-data-checkbox> -->
    </view>
    <view class="gradient" />
    <view class="flex justify-between">
      <view class="">计费方式</view>
      <uni-data-checkbox v-model="modeRadio" :localdata="billingMode" @change="textChange"></uni-data-checkbox>
    </view>
    <view class="gradient" />

    <view class="flex">
      <view class="flex" style="width: 50%;">
        <input disabled value="0" placeholder="请输入内容" style="background-color: gray;border: 1px solid gray;"></input>
        <uni-tag text="W" type="default"></uni-tag>
      </view>
      <view class="">~</view>
      <view class="flex">
        <input placeholder="功率" style="border: 1px solid gray;">
        <!-- <uni-tag text="w" type="default"></uni-tag> -->
        </input>
        <view class="" style="width: 40rpx;height: 48rpx;background-color: gray;color: black;">W</view>
      </view>
    </view>
    <view class="flex">
      <view class="flex" style="width: 50%;">
        <input placeholder="服务费" style="border: 1px solid gray;"></input>
        <uni-tag text="元" type="default"></uni-tag>
      </view>
      <view class="">/</view>
      <view class="flex">
        <input placeholder="时长" style="border: 1px solid gray;"></input>
        <uni-tag text="时" type="default"></uni-tag>
      </view>
    </view>
    <!--  <template v-if="radio=== 0 && modeRadio === 1">
      <input type="text">
      <input type="number" placeholder="功率">
      <input type="number" placeholder="服务费">
      <input type="number" placeholder="时长">
    </template>

    <template v-if="radio=== 1 && modeRadio === 1">

      <view class="flex">
        <p>尖</p>
        <input type="number" placeholder="电费">
        <input type="number" placeholder="服务费">
      </view>
      <view class="flex">
        <p>峰</p>
        <input type="number" placeholder="电费">
        <input type="number" placeholder="服务费">
      </view>
      <view class="flex">
        <p>平</p>
        <input type="number" placeholder="电费">
        <input type="number" placeholder="服务费">
      </view>
      <view class="flex">
        <p>谷</p>
        <input type="number" placeholder="电费">
        <input type="number" placeholder="服务费">
      </view>
    </template> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        radio: 0,
        car: [{
          text: '电瓶车',
          value: 0
        }, {
          text: '能源车',
          value: 1
        }],
        billingRadio: 1,
        billingInfoList: [{
            value: 0,
            text: '不展示'
          },
          {
            value: 1,
            text: '展示'
          }
        ],
        modeRadio: 0,
        billingMode: [{
            value: 0,
            text: '免费'
          },
          {
            value: 1,
            text: '功率计费'
          }
        ]
      }
    },
    methods: {
      carChange(e) {
        this.radio = e.detail.value
        console.log(this.radio);
      },
      textChange(e) {
        console.log(e.detail.value);
      }
    }
  }
</script>

<style lang="scss">
  page {
    color: black;
  }
</style>